<template id="address">
  <div class="content">
    <div class="deleteBtn" @click="delAddress">删除</div>
    <div class="phone">
      <div class="adsGroup">
        <div class="adsCard">
          <div class="line">
            <p>收货人：</p>
            <input
              type="text"
              placeholder="请填写收货人姓名"
              v-model="form.person"
              @blur="trimValue(form.person, 'person')"
              @input="writeValue(form.person, 'person')"
            />
            <transition name="fade">
              <p class="tip" v-if="tips.person">请填写收货人姓名</p>
            </transition>
          </div>
          <div class="line">
            <p>手机号码：+86 -</p>
            <input
              type="number"
              placeholder="请填写收货人手机号"
              v-model="form.phone"
              @blur="trimValue(form.phone, 'phone')"
              @input="writeValue(form.phone, 'phone')"
            />
            <transition name="fade">
              <p class="tip" v-if="tips.phone">{{ phoneTips }}</p>
            </transition>
          </div>
          <div class="line" style="padding:0">
            <p>所在地区：</p>
            <transition name="fade">
              <p class="tip" v-if="tips.area">请选择所在地区</p>
            </transition>
            <van-field
              v-model="form.area"
              is-link
              readonly
              placeholder="请选择所在地区"
              @click="openArea"
            />
            <van-popup v-model="isShowArea" round position="bottom">
              <van-area
                :area-list="areaList"
                @confirm="confirm"
                @cancel="cancel"
                ref="myArea"
              />
            </van-popup>
          </div>
          <div class="line">
            <p>详细地址：</p>
            <input
              type="text"
              placeholder="街道、楼牌号等"
              v-model="form.address"
              @blur="trimValue(form.address, 'address')"
              @input="writeValue(form.address, 'address')"
            />
            <transition name="fade">
              <p class="tip" v-if="tips.address">请填写详细地址</p>
            </transition>
          </div>
        </div>
      </div>
      <van-cell center title="设为默认地址">
        <template #right-icon>
          <van-switch
            v-model="form.isDefault"
            size="20"
            active-color="#00ffb0"
            inactive-color="#2b2c2d"
          />
        </template>
      </van-cell>
      <div class="phoneBottomBtn" @click="save">保存</div>
    </div>
    <CloseDialogVue
      :options="closeDialogOptions"
      @confirm="deleteAds"
      @cancel="closeDialogOptions.isShow = false"
    />
  </div>
</template>

<script>
import CloseDialogVue from "../../../components/CloseDialog.vue";
export default {
  components: { CloseDialogVue },
  name: "",
  props: {},
  watch: {
    isShowArea: {
      handler(newV, oldV) {
        if (!newV) {
          if (!this.form.area) {
            this.tips.area = true;
          } else {
            this.tips.area = false;
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      isShowArea: false,
      // 选项列表，children 代表子选项，支持多级嵌套
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
        },
      },
      closeDialogOptions: {
        isShow: false,
        title: "是 否 删 除",
      },
      phoneTips: "请填写手机号码",
      tips: {
        person: false,
        phone: false,
        area: false,
        address: false,
      },
      form: {
        person: "",
        phone: "",
        area: "",
        address: "",
        isDefault: false,
      },
    };
  },
  computed: {},
  methods: {
    trimValue(value, type) {
      if (!value) {
        if (type == "person") {
          this.tips.person = true;
          return false;
        } else if (type == "phone") {
          this.phoneTips = "请填写手机号码";
          this.tips.phone = true;
          return false;
        } else if (type == "area") {
          this.tips.area = true;
          return false;
        } else if (type == "address") {
          this.tips.address = true;
          return false;
        }
      } else {
        if (type == "phone") {
          let reg = new RegExp();
          reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
          if (!reg.test(this.form.phone)) {
            this.phoneTips = "请填写正确的手机号码";
            this.tips.phone = true;
            return false;
          } else {
            return true;
          }
        }
        return true;
      }
    },
    writeValue(value, type) {
      if (value) {
        if (type == "person") {
          this.tips.person = false;
        } else if (type == "phone") {
          this.tips.phone = false;
        } else if (type == "address") {
          this.tips.address = false;
        }
      }
    },
    save() {
      if (
        this.trimValue(this.form.person, "person") &&
        this.trimValue(this.form.phone, "phone") &&
        this.trimValue(this.form.area, "area") &&
        this.trimValue(this.form.address, "address")
      ) {
        console.log(this.form, 1);
      }
    },
    delAddress() {
      this.closeDialogOptions.isShow = true;
    },
    deleteAds() {
      this.closeDialogOptions.isShow = false;
    },
    openArea() {
      this.isShowArea = true;
      this.tips.area = false;
      this.form.area = "";
    },
    confirm(value) {
      console.log(value);
      let temp = [];
      value.map((item, index) => {
        if (item) {
          temp = item.name;
          this.form.area = this.form.area + temp;
        }
      });
      this.isShowArea = false;
    },
    cancel() {
      this.isShowArea = false;
      this.form.area = "";
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 768px) {
  .content {
    width: auto;
    padding: 20px 30px 62px 30px;
    .deleteBtn {
      height: 90px;
      line-height: 90px;
      color: #fff;
      font-size: 28px;
      position: absolute;
      top: 0;
      right: 30px;
      z-index: 999999;
    }
    .phone {
      display: block;
      color: #ccc;

      .adsGroup {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding: 20px 30px;
        .adsCard {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          font-size: 24px;
          .line {
            display: flex;
            align-items: center;
            width: inherit;
            border-bottom: 2px solid #1e2020;
            padding: 30px 0px;
            position: relative;
            .tip {
              position: absolute;
              left: 0;
              bottom: -8px;
              color: #f34c44;
              z-index: 9;
            }
            .fade-enter-active,
            .fade-leave-active {
              transition: all 0.4s;
              transform: translateY(-0px);
            }

            .fade-enter,
            .fade-leave-active {
              opacity: 0;
              transform: translateY(-5px);
            }
            p {
              word-break: keep-all;
              margin-bottom: 0;
              height: 48px;
              line-height: 48px;
              font-size: 24px;
            }
            input {
              height: 48px;
              background: #2b2c2d;
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              color: #ffffff;
              //   line-height: 55px;
              border: none;
              padding-left: 10px;
              padding-right: 10px;
            }
          }
        }
      }

      .van-cell {
        margin-top: 25px;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        color: #ccc;
        height: 80px;
        .van-cell__title {
          font-size: 24px;
        }
        /deep/.van-field__control {
          color: #fff;
          font-size: 24px;
        }
        /deep/.van-field__body {
          input::-webkit-input-placeholder {
            /* WebKit browsers 适配谷歌 */
            color: rgba(255, 255, 255, 0.5) !important;
          }

          input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 适配火狐 */
            color: rgba(255, 255, 255, 0.5) !important;
          }

          input::-moz-placeholder {
            /* Mozilla Firefox 19+ 适配火狐 */
            color: rgba(255, 255, 255, 0.5) !important;
          }

          input:-ms-input-placeholder {
            /* Internet Explorer 10+  适配ie*/
            color: rgba(255, 255, 255, 0.5) !important;
          }
        }
      }
      .van-cell::after {
        content: none;
      }
      .phoneBottomBtn {
        width: calc(100% - 60px);
        margin: 0 auto;
        height: 100px;
        background: url("~@/assets/images/invite/phoneLongBtn.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
        position: absolute;
        bottom: 30px;
        // left: 0;
      }
      /deep/ .van-popup {
        background: #2b2c2d;
        .van-picker {
          background: #2b2c2d;
        }
        .van-picker__toolbar {
          height: auto;
          padding: 30px 20px 0 20px;
          background: #2b2c2d;
          .van-picker__cancel {
            font-size: 30px;
          }
          .van-picker__confirm {
            font-size: 30px;
            color: #01f5ab;
          }
        }
        .van-picker__columns {
          .van-picker-column {
            background: #2b2c2d;
            font-size: 30px;
            color: #fff;
            .van-ellipsis {
              color: #fff;
            }
          }
          .van-picker__mask {
            background: none;
          }
        }
      }
    }
    input::-webkit-input-placeholder {
      /* WebKit browsers 适配谷歌 */
      color: rgba(255, 255, 255, 0.5) !important;
    }

    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 适配火狐 */
      color: rgba(255, 255, 255, 0.5) !important;
    }

    input::-moz-placeholder {
      /* Mozilla Firefox 19+ 适配火狐 */
      color: rgba(255, 255, 255, 0.5) !important;
    }

    input:-ms-input-placeholder {
      /* Internet Explorer 10+  适配ie*/
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }
}
</style>
